<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>bootstrap的form表单布局</title>
		<!---引入jquery资源--->
		<script type="text/javascript" src="${basePath }static/bootstrap-3.3.7-dist/js/jquery.min.js"></script>
		<!--引入bootstrap的核心js资源文件--->
		<script type="text/javascript" src="${basePath }static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<!--引入bootstrap的核心css资源文件--->
		<link rel="stylesheet" type="text/css" href="${basePath }static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<script type="text/javascript">
		function doAjaxQuery(){
			// console.info("here");
			$.ajax({
				   // 请求类型
				   type: "POST",
				   // 服务器url
				   url: "${basePath }ajaxQueryAdminInfo2",
				   // 发送的数据
				   data: $("#myForm").serialize(),
				   // responseText转换的数据类型为json对象类型
				   dataType:"json",
				   // 成功之后回调方法，方法的参数是服务器响应的内容也就是ajax引擎获取到responseText内容
				   success: function(data){
					 console.info("ajax:");  
					 console.info(data);
					 // 显示结果串
					 var strContent = "";
					 if(data){						
						 // 解析数据结果
						 $.each(data,function(index,ev){
							 strContent +="<tr>";
							 strContent +="<th>";
							 strContent +=(index+1);
							 strContent +="</th>";
							 
							 strContent +="<td>";
							 strContent +=ev.adminname2;
							 strContent +="</td>";
							 
							 strContent +="<td>";
							 strContent +=ev.amdinsex;
							 strContent +="</td>";
							 
							 strContent +="<td>";
							 strContent +=ev.amdinage;
							 strContent +="</td>";
							 
							 strContent +="<td>";
							 strContent +=ev.admintel;
							 strContent +="</td>";
							 
							 strContent +="<td>";
							 strContent +=ev.adminemail;
							 strContent +="</td>";
							 
							 strContent +="<td>";
							 strContent +=ev.admincreatetime;
							 strContent +="</td>";
							 
							 //修改按钮
							 strContent +="<td>";
							 strContent +="<a href='${basePath}doAdminInfoModify?uid="+ev.adminid+"'>修改</a>"
							 strContent +="</td>";
							 
							//删除按钮
							 strContent +="<td>";
							 strContent +="<a href='${basePath}doAdminInfoDelete?uid="+ev.adminid+"' onclick='return confirm(\"是否删除用户名["+ev.adminname2+"]记录\");'>删除</a>"
							 strContent +="</td>";
							 
							 strContent +="</tr>";
						 });						 
					 }  
					 // 解析结果集完成之后，将需要显示的内容添加到dom控件中 （Ajax回调函数的局部刷新操作）
					 $("#querytbody").html(strContent);  
				     console.info(data);
				   },
				   error:function(){
					   alert("error...");
				   }
				});
		}
		</script>
	</head>

	<body>
		<form class="form-horizontal" id="myForm">
			<div class="form-group">
			</div>
			<div class="form-group">
				<label for="txtName" class="col-sm-2 control-label">用户名</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="adminName" name="adminname2" placeholder="请输入用户名">
				</div>
				<label for="txtEmail" class="col-sm-2 control-label">邮箱</label>
				<div class="col-sm-3">
					<input type="email" class="form-control" id="adminEmail" name="adminemail" placeholder="请输入邮箱">
				</div>
			</div>
			<div class="form-group">
				
				<label for="txtSex" class="col-sm-2 control-label">性别</label>
				<div class="col-sm-3">
					<label class="radio-inline">
  						<input type="radio" name="amdinsex" id="amdinSex1" value="男"> 男
					</label>
					<label class="radio-inline">
						<input type="radio" name="amdinsex" id="amdinSex2" value="女"> 女
					</label>
					<label class="radio-inline">
						<input type="radio" name="amdinsex" id="amdinSex3" value=""> 性别不限
					</label>					
				</div>
				<label for="txtName" class="col-sm-2 control-label">电话</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="adminTel" name="admintel" placeholder="请输入电话">
				</div>
			</div>
			<div class="form-group">
				
				<label for="txtPsw" class="col-sm-2 control-label">年龄</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="amdinAge" name="amdinage" placeholder="请输入年龄">
					<input type="text" class="form-control" id="amdinAge2" name="amdinage2" placeholder="请输入年龄">
				</div>
				<label for="txtName" class="col-sm-2 control-label">创建日期</label>
				<div class="col-sm-3">
					<input type="date" class="form-control" id="adminCreateTime" name="admincreatetime" placeholder="请输入创建时间">
					<input type="date" class="form-control" id="adminCreateTime2" name="admincreatetime" placeholder="请输入创建时间">
				</div>
			</div>
			
			<div class="form-group">
				<div class="col-sm-offset-4 col-sm-1">
					<button type="button" class="btn btn-default" onclick="doAjaxQuery();">查&nbsp;&nbsp;询</button>
				</div>
				<div class="col-sm-offset-1 col-sm-1">
					<button type="button" class="btn btn-default">取&nbsp;&nbsp;消</button>
				</div>
			</div>
		</form>
		<div class="bs-example" data-example-id="hoverable-table">
		<table class="table table-hover">
			<thead>
			
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>电话</th>
					<th>邮箱</th>
					<th>创建时间</th>
					<th>修改</th>
					<th>删除</th>
				</tr>
			</thead>
			<tbody id="querytbody">
				
			</tbody>
		</table>
	</div>
	</body>

</html>